<template>
    <div class="setLoginList">
        <div class="head">
            <el-button type="primary" @click="addHandle">+新增主题</el-button>
        </div>
        <div class="body" id="setLoginListBody">
            <el-table border :data="tableData" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :height="tableHeight">
                <el-table-column prop="pageName" label="名称"></el-table-column>
                <el-table-column prop="userGroup" label="用户组"></el-table-column>
                <el-table-column prop="linkName" label="跳转地址"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间"></el-table-column>
                <el-table-column label="操作" width="170">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editHandle(scope.row)" title="点击进入编辑">编辑</el-button>
                        <el-button type="text" style="margin-left: 20px" @click="bindHandle(scope.row)" title="点击进入编辑">绑定</el-button>
                        <el-button type="text" style="margin-left: 20px; color: #ff1f2c" @click="delHandle(scope.row)" title="点击删除">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pages">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.currentPage" :page-sizes="pages.pageSizes" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
            </el-pagination>
        </div>

        <el-dialog title="绑定用户组" :visible.sync="bindUserGroup.show" custom-class="bindUserGroup" style="width:100%;min-width:400px;" :modal-append-to-body="false" :append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleCloseBindUserGroup" v-loading="bindUserGroup.loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <div class="content">
                <div class="section">
                    <div class="itemName">
                        <p class="left"><span></span>登录模板名
                        </p>
                        <p class="right">{{bindUserGroup.curLogin.pageName}}</p>
                    </div>
                    <div class="itemGroup">
                        <p class="left"><span>*</span>绑定用户组</p>
                        <div class="right">
                            <el-select v-model="bindUserGroup.value" placeholder="请选择" clearable @change="bindUserGroupChange">
                                <el-option v-for="item in bindUserGroup.options" :key="item.ugId" :label="item.ugName" :value="item.ugId">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseBindUserGroup">取 消</el-button>
                <el-button type="primary" @click="handleDetermineBindUserGroup">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="setLoginAfterLink.title" :visible.sync="setLoginAfterLink.show" style="width:100%;min-width:400px;" custom-class="setLoginAfterLink" :modal-append-to-body="false" :append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleCloseLoginAfterLink" v-loading="setLoginAfterLink.loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <div class="content">
                <div class="section">
                    <div class="itemName">
                        <p class="left"><span>*</span>主题名称</p>
                        <p class="right">
                            <el-input v-model="setLoginAfterLink.pageName" placeholder="请输入主题名称" :maxlength="20" show-word-limit clearable></el-input>
                        </p>
                    </div>
                    <div class="itemLink">
                        <p class="left"><span>*</span>选择链接</p>
                        <div class="right">
                            <el-button class="noLink" @click="openChooseLink" v-if="setLoginAfterLink.linkName=='点击选择链接'">
                                <i class="el-icon-paperclip"></i>
                                <span>{{setLoginAfterLink.linkName}}</span>
                            </el-button>
                            <div class="hasLink" v-if="setLoginAfterLink.linkName!='点击选择链接'">
                                <i class="el-icon-paperclip"></i>
                                <span class="linkVal">{{setLoginAfterLink.linkName}}</span>
                                <button class="edit" @click="editOpenChooseLink">修改</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseLoginAfterLink">取 消</el-button>
                <el-button type="primary" @click="handleSaveSetLoginAfterLink">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import Bus from "@/utils/bus.js";
import { getToken } from "@/utils/auth";
import headApi from '@/utils/hade';
export default {
    name: "setLoginAfterLink",
    data() {
        return {
            pageName: "设置的登录页模板的列表",
            loading: false,
            tableHeight: 0,
            tableData: [],
            //绑定用户组
            bindUserGroup: {
                loading: false,
                curLogin: {},
                show: false,
                value: null,
                options: [
                    //用户组列表数据
                    {
                        searchValue: null,
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: null,
                        remark: null,
                        params: {},
                        ugId: 129,
                        uId: 299,
                        ugName: "默认用户组",
                        ugState: 0,
                        data: null,
                        feeFixed: "0",
                        feePercentage: "0",
                        one: "2021-11-19",
                        two: null,
                        num: 8,
                    },
                    {
                        searchValue: null,
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: null,
                        remark: null,
                        params: {},
                        ugId: 320,
                        uId: 299,
                        ugName: "环境保护",
                        ugState: 1,
                        data: null,
                        feeFixed: "0",
                        feePercentage: "0",
                        one: "2022-01-08",
                        two: null,
                        num: 1,
                    },
                    {
                        searchValue: null,
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: null,
                        remark: null,
                        params: {},
                        ugId: 321,
                        uId: 299,
                        ugName: "阿阿",
                        ugState: 1,
                        data: null,
                        feeFixed: "0",
                        feePercentage: "0",
                        one: "2022-01-08",
                        two: null,
                        num: 0,
                    },
                    {
                        searchValue: null,
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: null,
                        remark: null,
                        params: {},
                        ugId: 322,
                        uId: 299,
                        ugName: "哈哈哈哈",
                        ugState: 1,
                        data: null,
                        feeFixed: "0",
                        feePercentage: "0",
                        one: "2022-01-08",
                        two: "0",
                        num: 11,
                    },
                    {
                        searchValue: null,
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: null,
                        remark: null,
                        params: {},
                        ugId: 550,
                        uId: 299,
                        ugName: "11",
                        ugState: 1,
                        data: null,
                        feeFixed: "0",
                        feePercentage: "0",
                        one: "2022-03-08",
                        two: null,
                        num: 0,
                    },
                ],
            },
            //设置登录后台跳转链接主题
            setLoginAfterLink: {
                loading: false,
                title: "新增主题",
                show: false,
                pageName: "", //主题名称
                pageId: null,
                pageType: 7,
                pageContent: null,
                linkName: "点击选择链接",
                linkUrl: "",
                tenantId: "",
                ugId: "",
                ugName: "",
            },
            pages: {
                currentPage: 1,
                pageSizes: [10, 20, 30],
                pageSize: 10,
                total: 10,
            },
            tenantId: 299, //租户ID
        };
    },
    created() {},
    props: [],
    components: {},
    mounted() {
        if (localStorage.getItem("tenantId")) {
            this.tenantId = localStorage.getItem("tenantId");
        }
        this.$nextTick(() => {
            if (
                this.$parent.$parent.$parent.activeName === "setLoginAfterLink"
            ) {
                this.init();
            } else {
                setTimeout(() => {
                    if (
                        this.$parent.$parent.$parent.activeName ===
                        "setLoginAfterLink"
                    ) {
                        this.init();
                    }
                }, 1000);
            }
        });

        Bus.$off(`chooseLinkAfterSetLoginAfterLink`);
        Bus.$on(`chooseLinkAfterSetLoginAfterLink`, (params) => {
            this.setLoginAfterLink.linkName = params.name;
            this.setLoginAfterLink.linkUrl = params.url;
        });

        window.resize = () => {
            this.setTableHeight();
        };
    },
    methods: {
        //初始化
        init() {
            localStorage.removeItem("decorateLoginModuleId");
            // this.selectByUserGroupList();//真实接口暂未启用
            this.getTableList();
            this.setTableHeight();
            setTimeout(() => {
                if (this.tableHeight === 0) {
                    // //console.log("未检索到projectBody高度");
                    this.setTableHeight();
                }
            }, 200);
        },
        //动态设置表格高度
        setTableHeight() {
            let bodyDom = document.getElementById("setLoginListBody");
            if (bodyDom && bodyDom.getBoundingClientRect().height) {
                this.tableHeight = bodyDom.getBoundingClientRect().height;
            } else {
                if (this.$parent.$parent.activeName === "login") {
                    setTimeout(() => {
                        // //console.log("project再次获取table高度");
                        this.setTableHeight();
                    }, 1500);
                }
            }
        },
        //获取列表数据
        getTableList() {
            this.loading = true;
            this.tableData = [];
            if (getToken()) {
                this.axios
                    .post(
                        `${headApi}/appPageContent/list`,
                        {
                            pageType: 7, //0 自定义页面 1 个性化页面 2 固定页面 3 登录页面  4 自定义表单  5底部导航按钮  6 固定主题色  7 登录主题
                            tenantId: localStorage.getItem("tenantId"),
                        },
                        { headers: { Authorization: "Bearer " + getToken() } }
                    )
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            //console.log(res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data && data.length > 0) {
                                    // let cs = this.componentStyle;
                                    // if (cs && cs.length > 0) {
                                    //   data.forEach((item) => {
                                    //     cs.forEach((row) => {
                                    //       if (item.componentTypeId === row.id) {
                                    //         item.componentTypeName = row.componentTypeName;
                                    //       }
                                    //     });
                                    //   });
                                    // }
                                    data.forEach((item) => {
                                        let pageContent = JSON.parse(
                                            item.pageContent
                                        );
                                        item.linkName =
                                            pageContent[0].linkName || "";
                                        item.userGroup =
                                            pageContent[0].ugName || "";
                                    });
                                    this.tableData = data;
                                    this.pages.total = data.length;
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                    });
            }
        },

        //点击，删除
        delHandle(row) {
            this.$confirm("删除后不可恢复, 确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    //执行删除的方法
                    this.delPage(row);
                })
                .catch(() => {});
        },
        //删除当前记录的方法
        delPage(row) {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .delete(`${headApi}/appPageContent/${row.id}`, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                this.$message.success("删除成功");
                                setTimeout(() => {
                                    this.getTableList();
                                }, 1500);
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },
        //切换每页展示多少条数据
        handleSizeChange(pageSize) {
            this.pages.pageSize = pageSize;
            this.getTableList();
        },
        //点击分页
        handleCurrentChange(page) {
            this.pages.currentPage = page;
            this.getTableList();
        },
        //获取用户组列表
        selectByUserGroupList() {
            this.loading = true;
            if (getToken()) {
                this.axios
                    .get(`${headApi}/system/UserGroup/selectByUserGroupList`, null, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        // console.log(res);
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                // this.$message.success("保存成功");
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },

        //在列表中点击"绑定"按钮，打开绑定弹窗
        bindHandle(row) {
            this.setLoginAfterLink.pageName = row.pageName;
            this.setLoginAfterLink.pageId = row.id;
            this.setLoginAfterLink.pageContent = JSON.parse(row.pageContent);
            this.setLoginAfterLink.tenantId = row.tenantId;
            this.setLoginAfterLink.ugId =
                this.setLoginAfterLink.pageContent[0].ugId;
            this.setLoginAfterLink.ugName =
                this.setLoginAfterLink.pageContent[0].ugName;
            this.bindUserGroup.value =
                this.setLoginAfterLink.pageContent[0].ugId;
            this.bindUserGroup.show = true;
            this.bindUserGroup.curLogin = row;
        },
        //关闭，绑定用户组的弹窗
        handleCloseBindUserGroup() {
            this.bindUserGroup.show = false;
        },
        //选择 绑定用户组 下拉弹窗
        bindUserGroupChange() {
            if (this.bindUserGroup.value) {
                this.bindUserGroup.options.forEach((item) => {
                    if (item.ugId == this.bindUserGroup.value) {
                        if (this.setLoginAfterLink.pageContent) {
                            this.setLoginAfterLink.pageContent[0].ugId =
                                item.ugId;
                            this.setLoginAfterLink.pageContent[0].ugName =
                                item.ugName;
                        }
                    }
                });
            } else {
                if (this.setLoginAfterLink.pageContent) {
                    this.setLoginAfterLink.pageContent[0].ugId = "";
                    this.setLoginAfterLink.pageContent[0].ugName = "";
                }
            }
        },
        //点确定，绑定用户组的弹窗
        handleDetermineBindUserGroup() {
          
            let params = new Object();
            if (this.setLoginAfterLink.pageId) {
                params.id = this.setLoginAfterLink.pageId;
            }
            let pageName = this.setLoginAfterLink.pageName;

            params.pageName = pageName;
            params.pageType = this.setLoginAfterLink.pageType;
            params.pageKey = pageName;
            params.tenantId = this.tenantId; // 租户ID
            params.pageContent = JSON.stringify(
                this.setLoginAfterLink.pageContent
            );

            this.bindUserGroup.loading = true;
            if (getToken()) {
                this.axios
                    // .put(`${headApi}/appPageContent`, params, {
                    //     headers: { Authorization: "Bearer " + getToken() },
                    // })
                    .post(`/system/UserGroup/updateUserGroup`, {
                         userGroup: {
                            ugId: this.bindUserGroup.value, 
                            landingPageId: this.bindUserGroup.curLogin.id
                        }
                    }, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.bindUserGroup.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("保存成功");
                                setTimeout(() => {
                                    this.handleCloseBindUserGroup();
                                    this.getTableList();
                                }, 1200);
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.bindUserGroup.loading = false;
                        console.log(3, err);
                    });
            }
        },

        //新增主题
        addHandle() {
            this.setLoginAfterLink.title = "新增主题";
            this.setLoginAfterLink.pageName = "";
            this.setLoginAfterLink.pageId = null;
            this.setLoginAfterLink.pageContent = null;
            this.setLoginAfterLink.linkName = "点击选择链接";
            this.setLoginAfterLink.linkUrl = "";
            this.setLoginAfterLink.tenantId = "";
            this.setLoginAfterLink.ugId = "";
            this.setLoginAfterLink.ugName = "";
            this.setLoginAfterLink.show = true;
        },
        //点击编辑主题
        editHandle(row) {
            this.setLoginAfterLink.title = "编辑主题";
            this.setLoginAfterLink.pageName = row.pageName;
            this.setLoginAfterLink.pageId = row.id;
            this.setLoginAfterLink.pageContent = JSON.parse(row.pageContent);
            this.setLoginAfterLink.linkName =
                this.setLoginAfterLink.pageContent[0].linkName;
            this.setLoginAfterLink.linkUrl =
                this.setLoginAfterLink.pageContent[0].linkUrl;
            this.setLoginAfterLink.tenantId = row.tenantId;
            this.setLoginAfterLink.ugId =
                this.setLoginAfterLink.pageContent[0].ugId;
            this.setLoginAfterLink.ugName =
                this.setLoginAfterLink.pageContent[0].ugName;
            this.setLoginAfterLink.show = true;
        },
        //关闭，新增主题弹窗
        handleCloseLoginAfterLink() {
            this.setLoginAfterLink.show = false;
        },
        //打开选择链接的弹窗,新增
        openChooseLink() {
            Bus.$emit("openChooseLinkGroup", {
                name: "chooseLink",
                controlid: "SetLoginAfterLink",
            });
        },
        //打开选择链接的弹窗，修改
        editOpenChooseLink() {
            Bus.$emit("openChooseLinkGroup", {
                name: "chooseLink",
                controlid: "SetLoginAfterLink",
            });
        },
        //保存设置的主题
        handleSaveSetLoginAfterLink() {
            if (!this.setLoginAfterLink.pageName) {
                this.$message.warning("请输入主题名称");
                return false;
            }
            if (!this.setLoginAfterLink.linkUrl) {
                this.$message.warning("请选择登录后的跳转链接");
                return false;
            }
            let params = new Object();
            if (this.setLoginAfterLink.pageId) {
                params.id = this.setLoginAfterLink.pageId;
            }
            let pageName = this.setLoginAfterLink.pageName;
            if (this.setLoginAfterLink.pageContent) {
                this.setLoginAfterLink.pageContent[0].pageName = pageName;
                this.setLoginAfterLink.pageContent[0].linkName =
                    this.setLoginAfterLink.linkName;
                this.setLoginAfterLink.pageContent[0].linkUrl =
                    this.setLoginAfterLink.linkUrl;
                this.setLoginAfterLink.pageContent[0].tenantId = this.tenantId;
                this.setLoginAfterLink.pageContent[0].ugId =
                    this.setLoginAfterLink.ugId;
                this.setLoginAfterLink.pageContent[0].ugName =
                    this.setLoginAfterLink.ugName;
            } else {
                this.setLoginAfterLink.pageContent = new Array();
                let arr = [];
                arr.push({
                    id: new Date().getTime(),
                    pageName: pageName,
                    linkName: this.setLoginAfterLink.linkName,
                    linkUrl: this.setLoginAfterLink.linkUrl,
                    tenantId: this.tenantId,
                    ugId: this.setLoginAfterLink.ugId,
                    ugName: this.setLoginAfterLink.ugName,
                });
                this.setLoginAfterLink.pageContent = arr;
            }
            params.pageName = pageName;
            params.pageType = this.setLoginAfterLink.pageType;
            params.pageKey = pageName;
            params.tenantId = this.tenantId; // 租户ID
            params.pageContent = JSON.stringify(
                this.setLoginAfterLink.pageContent
            );
            if (this.setLoginAfterLink.pageId) {
                this.saveEdit(params);
            } else {
                this.saveAdd(params);
            }
        },
        //保存新增的主题
        saveAdd(params) {
            this.setLoginAfterLink.loading = true;
            if (getToken()) {
                this.axios
                    .post(`${headApi}/appPageContent`, params, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.setLoginAfterLink.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("保存成功");
                                setTimeout(() => {
                                    this.handleCloseLoginAfterLink();
                                    this.getTableList();
                                }, 1200);
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.setLoginAfterLink.loading = false;
                        console.log(3, err);
                    });
            }
        },
        //保存编辑的主题
        saveEdit(params) {
            this.setLoginAfterLink.loading = true;
            if (getToken()) {
                this.axios
                    .put(`${headApi}/appPageContent`, params, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.setLoginAfterLink.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("保存成功");
                                setTimeout(() => {
                                    this.handleCloseLoginAfterLink();
                                    this.getTableList();
                                }, 1200);
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.setLoginAfterLink.loading = false;
                        console.log(3, err);
                    });
            }
        },
    },
    computed: {},
    watch: {},
};
</script>
<style scoped lang="scss">
.setLoginList {
    height: 100%;
    .head {
        margin-bottom: 15px;
    }
    .body {
        margin-bottom: 15px;
        height: calc(100% - 98px);
        .el-table {
            height: 100%;
            .row {
                display: flex;
                align-items: center;
            }
            .logoBox,
            .iconBox {
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .logoBox {
                margin-right: 10px;
                .logo {
                    width: 30px;
                    height: 30px;
                    border-radius: 100%;
                }
            }
            .iconBox {
                margin-right: 3px;
                i {
                    width: 26px;
                    height: 26px;
                    font-size: 14px;
                    border-radius: 100%;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
    .pages {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
<style lang="scss">
.bindUserGroup {
    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 50px 0;
        flex-direction: column;
        .section {
            width: 350px;
            .itemName {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                line-height: 30px;
                margin-bottom: 20px;
                .left {
                    margin-right: 10px;
                    width: 90px;
                    span {
                        width: 5px;
                        display: inline-block;
                    }
                }
                .right {
                    width: calc(100% - 90px);
                }
            }
            .itemGroup {
                width: 100%;
                display: flex;
                line-height: 30px;
                justify-content: flex-start;
                align-items: center;
                .left {
                    margin-right: 10px;
                    width: 90px;
                    span {
                        color: red;
                        position: relative;
                        top: 1px;
                        left: -2px;
                    }
                }
                .right {
                    width: calc(100% - 90px);
                }
            }
        }
    }
}
.setLoginAfterLink {
    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 50px 0;
        flex-direction: column;
        .section {
            .itemName {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                line-height: 30px;
                margin-bottom: 30px;
                .left {
                    margin-right: 10px;
                    width: 80px;
                    span {
                        color: red;
                        position: relative;
                        top: 1px;
                        left: -2px;
                    }
                }
                .right {
                    width: calc(100% - 80px);
                    .el-input {
                        width: 370px;
                    }
                }
            }
            .itemLink {
                width: 100%;
                display: flex;
                line-height: 30px;
                justify-content: flex-start;
                align-items: center;
                .left {
                    margin-right: 10px;
                    width: 80px;
                    span {
                        color: red;
                        position: relative;
                        top: 1px;
                        left: -2px;
                    }
                }
                .right {
                    width: calc(100% - 80px);
                    .noLink {
                        width: 370px;
                        display: flex;
                        height: 36px;
                        padding: 0;
                        justify-content: flex-start;
                        align-items: center;
                        color: #888;
                        .el-icon-paperclip {
                            width: 30px;
                        }
                    }
                    .hasLink {
                        width: 370px;
                        display: flex;
                        height: 36px;
                        padding: 0;
                        border: 1px solid #dcdfe6;
                        box-sizing: border-box;
                        border-radius: 4px;
                        align-items: center;
                        justify-content: space-between;
                        .el-icon-paperclip {
                            width: 30px;
                            height: 36px;
                            display: flex;
                            justify-content: center;
                            box-sizing: border-box;
                            align-items: center;
                            color: #ccc;
                            border-right: 1px solid transparent;
                        }
                        .linkVal {
                            width: calc(100% - 90px);
                            height: 100%;
                            color: #999;
                            font-size: 14px;
                            box-sizing: border-box;
                            padding-left: 10px;
                        }
                        .edit {
                            font-size: 14px;
                            color: #0079fe;
                            border: none;
                            background-color: transparent;
                            height: 100%;
                            width: 60px;
                            border-left: 1px solid #eee;
                            cursor: pointer;
                        }
                        &:hover {
                            .el-icon-paperclip {
                                border-right: 1px solid #eee;
                            }
                            .linkVal {
                                cursor: no-drop;
                            }
                            .edit {
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
